<!---
 添加用户信息
-->
<template>
  <a-form
    name="custom-validation"
    ref="formRef"
    :model="userClass.data.info"
    :labelCol="{labelCol:{ span: 4 }}"
    :wrapperCol="{wrapperCol: { span: 20 }}"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item required has-feedback label="用户账号:" name="username">
      <a-input
        v-model:value="userClass.data.info.username"
        type="text"
        autocomplete="off"
        placeholder="请输入用户账号"
      />
    </a-form-item>
    <a-form-item required has-feedback label="真实姓名:" name="nickname">
      <a-input
        required
        v-model:value="userClass.data.info.nickname"
        type="text"
        autocomplete="off"
        placeholder="请输入真实姓名"
      />
    </a-form-item>
    <a-form-item required has-feedback label="手机号:" name="phone" >
      <a-input 
      v-model:value="userClass.data.info.phone"
       type="tel" 
       autocomplete="off" 
       placeholder="请输入手机号" />
    </a-form-item>
    <a-form-item required has-feedback label="联系邮箱:"  name="email">
      <a-input
        v-model:value="userClass.data.info.email"
        type="email"
        autocomplete="off"
        placeholder="请输入联系邮箱"
      />
    </a-form-item>
    <a-form-item required has-feedback label="所在部门:"  name="department">
      <a-input
        v-model:value="userClass.data.info.department"
        type="text"
        autocomplete="off"
        placeholder="请选择所在部门"
      />
    </a-form-item>
    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item> -->
  </a-form>
</template>
<script lang="ts">
import {ValidateErrorEntity} from "ant-design-vue/es/form/interface";
import { defineComponent,ref} from "vue";
import { Button,Input,Form} from "ant-design-vue";
import {userClass} from "@/modules/user/user";
export default defineComponent({
     components: {
      [Button.name]:Button,
      [Input.name]:Input,
      [Form.name]:Form,
      [Form.Item.name]:Form.Item
  },
  setup() {
    const formRef = ref();
    const handleFinish = (values) => {
      //提交表单且数据验证成功后回调事件
      console.log(values);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      //提交表单且数据验证失败后回调事件
      console.log(errors);
    };
    const resetForm = () => {//重置
      formRef.value.resetFields();
    };
    return {
      userClass,
      formRef,
      handleFinish,
      handleFinishFailed,
      resetForm
    };
  },
});
</script>
